<template>
  <div class="StylePage CommonPage">
    <el-tabs v-model="activeMenu" type="card">
      <el-tab-pane label="系统配置" name="system"></el-tab-pane>
      <el-tab-pane label="菜单样式" name="menu"></el-tab-pane>
    </el-tabs>
    <div class="StylePage_center">
      <div class="menuStyleList" v-if="activeMenu === 'menu'">
        <div class="menuStyleList_span" v-for="item in menuList" v-bind:key="item.key"
             :class="item.key === activeKey?'is-active':''" v-on:click="setMenuTheme(item.key)">
          <div class="menuStyleList_span_img">
            <img :src="item.img"/>
          </div>
          <div class="menuStyleList_span_label">{{ item.label }}</div>
          <i class="el-icon-success"></i>
        </div>
      </div>
      <div class="formConfig" v-else-if="activeMenu === 'system'">
        <div class="formConfig_span">
          <div class="formConfig_span_title">企业信息</div>
          <div class="formConfig_span_form">
            <div class="company">
              <div class="company_logo"></div>
              <div class="company_name formSpan">
                <div class="label">系统名称</div>
                <div class="input">
                  <el-input size="mini" placeholder="请输入系统名称" clearable></el-input>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="formConfig_span">
          <div class="formConfig_span_title">开发配置</div>
          <div class="formConfig_span_form">
            <div class="flex">
              <div class="formSpan">
                <div class="label">API生产域名</div>
                <div class="input">
                  <el-input size="mini" placeholder="请输入API生产域名" clearable>
                    <template #prepend>Http://</template>
                  </el-input>
                </div>
              </div>
              <div class="formSpan">
                <div class="label">API开发域名</div>
                <div class="input">
                  <el-input size="mini" placeholder="请输入API开发域名" clearable>
                    <template #prepend>Http://</template>
                  </el-input>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mixins: [],
  components: {},
  data() {
    return {
      form: null,
      activeKey: null,
      activeMenu: "system",
      menuList: [
        {
          label: "默认样式",
          key: "default",
          img: require('../../../src/assets/img/menu/style2.png')
        },
        {
          label: "并排样式",
          key: "pithy",
          img: require('../../../src/assets/img/menu/style1.png')
        },
      ]
    }
  },
  computed: {},
  async mounted() {
  },
  methods: {

    setMenuTheme(activeKey) {
      this.activeKey = activeKey
      this.$store.commit("setMenuTheme", this.activeKey);
    }
  },
  watch: {}
}
</script>

<style lang="scss" scoped>
.StylePage_center{
  margin-top: 10px;
  .menuStyleList {
    display: flex;

    .menuStyleList_span {
      width: 200px;
      text-align: center;
      margin: 0 10px 10px 0px;
      position: relative;
      border: 1px solid var(--border-bc);
      border-radius: 5px;
      padding: 10px 0;

      .menuStyleList_span_img {
        width: 100%;
        display: flex;
        border-radius: 5px;
        position: relative;

        img {
          width: 100%;
          border-radius: 5px;
        }
      }

      .menuStyleList_span_label {
        height: 30px;
        line-height: 40px;
        font-size: 14px;
      }

      i {
        display: none;
      }

      &.is-active {
        i {
          display: block;
          position: absolute;
          top: 80px;
          left: 50%;
          transform: translate(-50%, 0);
          font-size: 30px;
          color: var(--success);
          background: #fff;
          border-radius: 100px;
        }
      }
    }
  }
  .formConfig{
    .formConfig_span{
      width: 650px;
      margin-bottom: 40px;
      &:last-child{
        margin-bottom: 0;
      }
      .formConfig_span_title{
        border-left: 4px solid var(--primary);
        padding-left: 10px;
        margin-bottom: 20px;
        font-size: 14px;
      }
      .formConfig_span_form{
        .company{
          display: flex;
          .company_logo{
            width: 60px;
            height: 60px;
            background: #eee;
            border-radius: 5px;
          }
          .company_name{
            flex: 1;
            margin-left: 20px;
          }
        }
        .flex{
          display: flex;
          justify-content: space-between;
          .formSpan{
            width: calc(50% - 10px);
          }
        }
      }
      .formSpan{
        .label{
          font-size: 14px;
          height: 30px;
          color: var(--font-hb);
        }
        .input{}
      }
    }
  }
}
</style>
